<!-- 学员管理 -->
<script setup lang="ts">
import { reactive, ref, toRefs, onMounted, computed } from 'vue';
import { ElPagination } from "element-plus"
import { Page } from '@vben/common-ui';
import dayjs from 'dayjs';
import { trimStringParams } from '#/utils/trimStringParams'

import { getCertifiedWhiteApi } from '#/api/certificate/white-link';
import { getCertifiedListApi } from "#/api/certificate/list"

import { FileText, Play } from '@vben/icons';

import {Query, Dialog, WhiteLinkDetailDialog} from './modules/white-link'
import CustomPopover from '#/components/custom-popover.vue';

const dialogRef = ref<InstanceType<typeof Dialog> | null>(null);
const detailRef = ref<InstanceType<typeof WhiteLinkDetailDialog> | null>(null);

const tableLoading = ref(false);
const certifiList = ref<any>([])
const total = ref(0)
const defaultQueryData = {
  phone: '',
  name: '',
  email: '',
  createTime: null,
  certificationId: ''
}
const queryData = reactive({ ...defaultQueryData });
const tableData = ref<any>([]);
const pageData = reactive({
  curPage: 1,
  pageSize: 10,
});

const getReleaseTime = computed(() => {
  return (time: any) => {
    return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--'
  }
})

const getTabelData = () => {
  const { curPage, pageSize } = toRefs(pageData)
  tableLoading.value = true;
  const params = {
    curPage: curPage.value,
    pageSize: pageSize.value
  } as any;
  const trimData = trimStringParams(queryData)
  Object.keys(trimData).forEach(key => {
    const kVal = trimData[key as keyof typeof trimData]
    if (kVal) {
      if (key === 'createTime' && Array.isArray(kVal)) {
        params['startTime'] = kVal[0]
        params['endTime'] = kVal[1]
      } else {
        params[key] = kVal
      }
    }
  })
  getCertifiedWhiteApi(params)
    .then((res) => {
      const { data, pageInfo } = res;
      tableData.value = data ?? [];
      total.value = pageInfo?.totalRows ?? 0;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

const resetQuery = () => {
  Object.assign(queryData, defaultQueryData)
  getTabelData()
}

// const edit = (data: any) => {
//   dialogRef.value?.inint(data);
// };
const detail = (data: any) => {
  detailRef.value?.inint(data)
};

const handleSizeChange = (val: number) => {
  pageData.pageSize = val
  pageData.curPage = 1
  getTabelData()
}
const handleCurrentChange = (val: number) => {
  pageData.curPage = val
  getTabelData()
}

const getListData = () => {
  getCertifiedListApi({}).then(res => {
    certifiList.value = res.data
  }).finally(() => {
  })
}

onMounted(() => {
  getTabelData()
  getListData()
})

</script>
<template>
  <Page class="h-full">
    <section class="flex h-full flex-col bg-[#fff] p-[24px] rounded-sm">
      <Query v-model="queryData" :certifiList="certifiList" @query-data="getTabelData" @reset-query="resetQuery" />
      <el-table :data="tableData" class="flex-1 overflow-auto" v-loading="tableLoading">
        <el-table-column align="center" type="selection" width="60px" />
        <el-table-column align="center" width="60px" type="index" :label="$t('common.numberIdxTxt')" />
        <el-table-column prop="name" :label="$t('whiteLink.memberNameTxt')" min-width="120">
          <template #default="{ row }">{{ row.name }}</template>
        </el-table-column>
        <el-table-column prop="phone" min-width="130" :label="$t('common.phoneTxt')" />
        <el-table-column prop="email" :label="$t('common.emailTxt')" min-width="230">
          <template #default="{ row }">
            <CustomPopover :strTxt="row.email ?? ''"></CustomPopover>
          </template>
        </el-table-column>
        <el-table-column prop="certified" :label="$t('whiteLink.certifiedNameTxt')" min-width="210">
          <template #default="{ row }">
            <el-popover width="380px" v-if="row.certified" trigger="hover">
              <template #reference>
                <div
                  v-if="row.certified?.length > 0"
                  class="certifiedName cursor-pointer width-auto overflow-hidden whitespace-nowrap text-ellipsis">
                  <Play fill="#595959" class="text-[#595959] play-icon scale-[0.6] inline-block align-top"></Play>
                  <span>{{ row.certified ? row.certified[0]?.certificationName : '--' }}</span>
                </div>
                <div v-else>--</div>
              </template>
              <template #default>
                <div>
                  <el-table class="w-full" height="200px" :data="row.certified">
                    <el-table-column width="60px" align="center" type="index" :label="$t('common.numberIdxTxt')" />
                    <el-table-column prop="certificationName" :label="$t('whiteLink.certifiedNameTxt')" />
                  </el-table>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="email" :label="$t('whiteLink.createTimeTxt')" width="180">
          <template #default="{ row }">
            <div>{{ getReleaseTime(row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.handleTxt')" min-width="60px">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="$t('common.detailTxt')" :show-after="1000" placement="top">
              <el-button link :icon="FileText" @click="detail(row)">
            </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <ElPagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination pt-[15px]"
        size="small" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.pageSize" :total="total"></ElPagination>
      <Dialog ref="dialogRef" @query-table="getTabelData" />
      <WhiteLinkDetailDialog :certifiList="certifiList" ref="detailRef" @query-table="getTabelData">
      </WhiteLinkDetailDialog>
    </section>
  </Page>
</template>
<style lang="scss" scoped>
  .certifiedName {
    &:hover {
      .play-icon {
        transform: rotate(90deg) scale(0.6);
        transition: transform 0.2s;
      }
    }
  }
</style>
